<template>
    <view>
        <view class="mians">
            <view class="miansPlan">
                <view class="plans_L">
                    <view class="L_img">
                        <image mode="aspectFill" :src="eleImgArr[tIndex].url" ></image>
                    </view>
                </view>
                <view class="plans">
                    <view class="plans_R">
                        <view class="R_conten">
                            <view class="R_tit">基础信息</view>
                            <view class="R_row"><text>品牌:</text><text>{{objData.brand||'--'}}</text> </view>
                            <view class="R_row"><text>型号:</text><text>{{objData.model||'--'}}</text></view>
                            <view class="R_row"><text>启用日期:</text><text>{{resTimes(objData.currentTime)}}</text></view>
                        </view>
                    </view>
                    <view class="plans_R R_bg">
                        <view class="R_conten conten_bg" >
                            <view class="R_tit R_tit_bg">规格信息</view>
                            <view class="R_row R_row_bg"><text>标题:</text><text>内容</text> </view>
                            <view class="R_row R_row_bg"><text>标题:</text><text>内容</text></view>
                            <view class="R_row R_row_bg"><text>标题:</text><text>内容</text></view>
                        </view>
                    </view>

                </view>
            </view>
        </view>

    </view>
</template>

<script>
import {getElevatorFoundation} from '@/apis/elevator.js';
import { hanleToken } from '@/utils/utils.js';
export default {
	data() {
		return {
			eleImgArr:[
				{url:'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/b24cf08b0405466c07706bb1dbc9ebdb.png',name:'机房',ids:1},
				{url:'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/f73390d25b557f686bc9cefc706db3ff.png',name:'楼层',ids:2},
				{url:'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/9e85df21b8c7761c8a18a90db804c7d7.png',name:'轿厢',ids:3},
				{url:'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/955f3f075bf7dfdd8f3b1788e0c9f68c.png',name:'底坑',ids:4},
				{url:'https://592800-erised-fresh.oss-cn-shenzhen.aliyuncs.com/upload/20231101/422145f8d9f6fb43e32e590aa4c8068f.png',name:'井道',ids:5},
			],
			objData:{},
			tIndex:0
		};
	},
	props:{
		elevatorId:{
			type:String,
			default:''
		},
		partId:{
			type:String,
			default:''
		}
	},
	watch:{
		partId:{
			handler(newVal, oldVal) {
				if (newVal != 0) {
					let objs = hanleToken('get','componentSelect') || {};
					this.eleImgArr.map(item=>{
						if (objs.name.indexOf(item.name) !== -1 ) {
							this.tIndex = item.ids - 1;
						}
					});
				}
			},
			immediate:true
		},
        
	},
	mounted() {
		this.initData(this.partId,this.elevatorId);
	},  
	methods:{

		initData(partId,elevatorId) {
			return new Promise((resolve,reject)=>{
				getElevatorFoundation({
					partId,
					elevatorId
				}).then((data)=>{
					console.log('getElevatorFoundation',data);
					if (data.code === 200) {
						this.objData = data.data || {};
					}
				});
			});
		},
		resTimes(str) {
			if (str) {
				return str.replaceAll('-','/');
			}
			return '--';
		}

	}
};
</script>

<style lang="scss" scoped>

.mians{
    background: #fff;
}
.miansPlan{
    width: 680rpx;
    margin: 0 auto;
    display: flex;
    // border: 2rpx red solid;  
    padding: 40rpx 0;
    .plans_L{
        box-sizing: border-box;
    //   border: 2rpx red solid;  

        flex: 1;
        .L_img{
        image{
            width: 240rpx;
            height: 700rpx;
        }
        
        }
    }
    .plans{
        display: flex;
        flex-direction: column;
        width: 375rpx;

    }
    .plans_R{
    //   flex: 1;
        // width: 408rpx;
        height: 176rpx;
        background: linear-gradient(135deg,#535de4, #6890ee 63%, #7596ea);
        border-radius: 24rpx 0px 0px 24rpx;
        padding:20rpx;
        margin-right: -40rpx;
        .R_conten{
            font-size: 12px;
            .R_tit{
                font-weight: 600;
                color: #ffffff;
                margin-bottom: 16rpx;
            }
            .R_row{
                font-weight: 400;
                color: #fff;
                display: flex;
                margin-bottom: 12rpx;
                text:nth-of-type(1){
                    width:120rpx;
                    display: inline-block;
                    color: #dbdef6;
                }
                text:nth-of-type(2){ 
                    width:242rpx;
                    display: inline-block;
                }

            }
        }
    }
    .R_bg{
        background: #f6f8fc;
        margin-top: 20rpx;
        .conten_bg{
            .R_tit_bg{
                color: #5267D4;
            }
            .R_row_bg{
                text:nth-of-type(1){
                    color: #333;
                    font-weight: 400;
                }
                text:nth-of-type(2){
                    color: #333;
                    font-weight: 500;
                }
            }
            
        }
    }
}
</style>